<template>
    <div class="main">
        <div class="top">

            <div class="breadcrumb">
                <p class="toptitle">首页</p>
                <i class="iconfont icon-youjiantou"></i>
                <p class="lasttitle">订单管理</p>
            </div>
            <Welcome></Welcome>
        </div>
        <div class="table">
            <!-- 添加空值检查 -->
            <!-- 输入框 -->
            <el-form v-if="orderdata" :inline="true" :model="orderdata" class="demo-form-inline">
                <el-form-item label="订单号">
                    <el-input v-model="orderdata.orderNo" placeholder="请输入订单号" clearable />
                </el-form-item>
                <el-form-item label="收货人">
                    <el-input v-model="orderdata.consignee" placeholder="请输入收货人" clearable />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="orderdata.phone" placeholder="请输入手机号" clearable />
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="orderdata.orderState" placeholder="请选择订单状态" clearable>
                        <el-option label="已受理" value="已受理" />
                        <el-option label="派送中" value="派送中" />
                        <el-option label="已完成" value="已完成" />
                    </el-select>
                </el-form-item>
                <!-- 时间选择器 -->
            </el-form>
            <div class="demo-range">
                <el-form-item label="选择时间" style="width: 500px;">
                    <el-date-picker v-model="orderdata.date" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" />
                </el-form-item>
                <!-- 按钮 -->

                <el-button type="primary" style="margin-left: 10px;" @click="order(orderdata)"> <el-icon>
                        <Search />
                    </el-icon> 搜索
                </el-button>
            </div>
            <el-table :data="orderdata1" style="width: 100%" height="500px">

                <el-table-column prop="orderNo" label="订单号" />
                <el-table-column prop="orderTime" label="下单时间">
                    <template #default="scope">
                        {{ formatDate(scope.row.orderTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="consignee" label="收货人" />
                <el-table-column prop="deliverAddress" label="配送地址" />
                <el-table-column prop="deliveryTime" label="送达时间">
                    <template #default="scope">
                        {{ formatDate(scope.row.deliveryTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="remarks" label="用户备注" />
                <el-table-column prop="orderAmount" label="订单金额" />
                <el-table-column prop="orderState" label="订单状态" />
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                            查看
                        </el-button>
                        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
                <!-- 分页 -->
            </el-table>
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" height="400px"
                    :page-sizes="[5, 10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog v-model="dialogFormVisible" title="订单详情" width="500">
                <el-form :model="form">
                    <el-form-item label="收货人" :label-width="formLabelWidth">
                        <el-input v-model="form.consignee" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="派送地址" :label-width="formLabelWidth">
                        <el-input v-model="form.deliverAddress" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="配送时间" :label-width="formLabelWidth">
                        <el-input v-model="form.orderTime" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="订单价格" :label-width="formLabelWidth">
                        <el-input v-model="form.orderAmount" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="订单号" :label-width="formLabelWidth">
                        <el-input v-model="form.orderNo" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="到达时间" :label-width="formLabelWidth">
                        <el-input v-model="form.deliveryTime" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.remarks" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="订单状态" :label-width="formLabelWidth">
                        <el-select v-model="form.orderState" :placeholder="form.orderState">
                            <el-option label="已完成" value="已完成" />
                            <el-option label="已受理" value="已受理" />
                            <el-option label="派送中" value="派送中" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer >
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirm(form)">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { getorder, getorderinfo, updateorder } from "../../../src/api/account"
import { ref } from 'vue'
import dayjs from 'dayjs'
import { ElMessageBox } from 'element-plus'
//编辑
const handleEdit = (row) => {
    console.log(row);
    dialogFormVisible.value = true;
    form.id = row.id;
    form.consignee = row.consignee;
    form.deliverAddress = row.deliverAddress;
    form.orderTime = row.orderTime;
    form.orderNo = row.orderNo;
    form.remarks = row.remarks;
    form.orderState = row.orderState;
    form.phone = row.phone;
    form.deliveryTime = row.deliveryTime;
    form.orderAmount = row.orderAmount;
}
//确定
const confirm = (form) => {
    dialogFormVisible.value = false;
    updateorder1(form);
    order(orderdata);
}
//弹窗
const dialogFormVisible = ref(false)
const formLabelWidth = '140px';
const form = reactive({
    id: '',
    orderNo: '',
    orderTime: '',
    phone: '',
    consignee: '',
    deliverAddress: '',
    deliveryTime: '',
    remarks: '',
    orderAmount: '',
    orderState: '',
})
//请求修改订单
const updateorder1 = async (form) => {
    const data = await updateorder(form);
    console.log(data);
}
//格式化时间
const formatDate = (date: string) => {
    return dayjs(date).format('YYYY-MM-DD HH:mm:ss'); // 使用 dayjs 格式化时间
};

//定义请求列表
const orderdata = reactive({
    currentPage: 1,
    pageSize: 5,
    orderNo: '',
    consignee: '',
    phone: '',
    orderState: '',
    date: ''
})
//定义后端返回参数
const orderdata1 = ref(null);
//获取订单列表
const order = async (orderdata) => {
    console.log('orderdata:', orderdata);
    const data = await getorder(orderdata);
    console.log('response from server:', data); // 打印后端返回的数据
    total.value = data.total;
    orderdata1.value = data.data;
}
order(orderdata);


//分页
const total = ref(0);
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const size = ref<ComponentSize>('default');
const background = ref(false);
const disabled = ref(false);

// 处理每页数量变化
const handleSizeChange = (val: number) => {
    currentPage4.value = 1; // 重置当前页码
    orderdata.currentPage = currentPage4.value;
    orderdata.pageSize = val;
    order(orderdata);
};

// 处理当前页码变化
const handleCurrentChange = (val: number) => {
    orderdata.currentPage = val;
    orderdata.pageSize = pageSize4.value;
    order(orderdata);
};



// 调试输出
// console.log('formInline initialized:', formInline);

const onSubmit = () => {
    console.log('submit!')
    // 调试输出
    console.log('formInline on submit:', formInline);
}
//请求查看
const orderdetail = async (orderid) => {
    const data = await getorderinfo(orderid);
}
//查看
const handleClick = (row) => {
    console.log(row);

    orderdetail({ id: row.id });
    ElMessageBox.alert(
        `<strong>收货人：${row.consignee}</strong>
    <br/>
    <strong>配送地址：${row.deliverAddress}</strong>
    <br/>
    <strong>配送时间：${row.orderTime}</strong>
    <br/>
    <strong>订单价格：${row.orderAmount}</strong>
    <br/>
    <strong>订单号：${row.orderNo}</strong>
    <br/>
    <strong>订单状态：${row.orderState}</strong>
     <br/>
    <strong>到达时间：${row.deliveryTime}</strong>
    <br/>
    <strong>电话：${row.phone}</strong>
    <br/>
    <strong>备注：${row.remarks}</strong>
    `,
        '详情信息',
        {
            dangerouslyUseHTMLString: true,
        }
    )

}

</script>

<style scoped>
/* 表格 */
:deep(.el-table .warning-row) {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

:deep(.el-table .success-row) {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

:deep(.el-table tbody tr:nth-child(even)) {
    background-color: skyblue;
    height: 70px;
}

:deep(.el-table tbody tr:nth-child(odd)) {
    background-color: #eee8aa;
    height: 70px;
}

/*  表单 */
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.demo-form-inline {
    display: flex;
}

/* 时间选择器 */
.demo-range .el-date-editor {
    margin: 8px;
}

.demo-range .el-range-separator {
    box-sizing: content-box;
}

.demo-range {
    font-size: 14px;
    color: #606266;
    display: flex;
}

.main {
    width: 100%;
    height: 730px;
    background-color: #f0f0f0;
}

/* 中间 */
.table {
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    min-height: 600px;
}

.list {
    width: 100%;
    border-bottom: 1px solid #e1e1e1;
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* 顶部面包屑 */
.toptitle {
    font-weight: bold;
}

.top {
    width: 96%;
    height: 50px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 内容分布在左右两侧 */
    padding: 0 20px;
    /* 添加左右内边距 */
}

.breadcrumb {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.iconfont {
    font-size: 14px;
    color: #999999;
    margin: 0 5px;
}

.lasttitle {
    color: #999999;
}
</style>